<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body{
            height: 3000px;
        }

        .fdj {
            width: 1200px;
            background-color: #ddd;
            margin: 120px auto;
            display: flex;
        }
        .left1{
            width: 300px;
            height: 300px;
            border: 10px solid #000;

            /* border-width: 10px;
            border-color: #000;
            border-style: solid; */

            position: relative;
            
        }
        .left1 img {
            width: 300px;
            height: 300px;
        }
        .cover {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,.5);
            /* position: absolute; */
            cursor: move;

            /* visibility:hidden / visible */
            visibility: hidden;

            /* display: none; */   

            position: absolute; 

        }
        .right {
            margin-left: 50px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        .right img {
            width: 1500px;
            height: 1500px;
            visibility: hidden;
            position: absolute;
        }
        .left ul {
            display: flex;
        }
        .left ul li {
            margin: 10px;
        }

        .left ul img {
            width: 60px;
            height: 60px;

            /* pointer-events: none;
            -webkit-user-select: none; */
        }

    </style>
</head>
<body>
    <div class="fdj">
        <div class="left">
            <div class="left1">
                <div class="cover"></div>
                <img src="" alt="">
            </div>
            <ul>
                <!-- <li>
                    <img src="" alt="">
                </li> -->
            </ul>
        </div>
        <div class="right">
            <img src="" alt="">
        </div>
    </div>


 

    <script>


        const smallArr = ['../images/girlsmall1.jpg' , '../images/girlsmall2.jpg' , '../images/girlsmall3.jpg']

        const bigArr = ['../images/girlbig1.jpg' , '../images/girlbig2.jpg' , '../images/girlbig3.jpg']



        function Mirror (small , big) {
            this.oBox = document.querySelector('.fdj') ;
            this.oLeft1 = this.oBox.querySelector('.left1') ;
            this.oCover = this.oBox.querySelector('.cover') ;
            this.oUl = this.oBox.querySelector('ul') ;
            this.oRight = this.oBox.querySelector('.right') ;
            this.oRightImg = this.oBox.querySelector('.right img') ;
            this.oLeftImg = this.oLeft1.querySelector('img') ;
            this.small = small ;
            this.big = big ;
            this.r = this.oCover.offsetWidth / 2 ;
            this.leftVal = this.oBox.offsetLeft ;
            this.topVal = this.oBox.offsetTop ;
            this.bd = getCss(this.oLeft1 , 'border-width') ;
            this.maxX = this.oLeftImg.clientWidth - this.oCover.clientWidth ;
            this.rightMax = this.oRightImg.clientWidth - this.oRight.clientWidth ;
            this.scale = this.rightMax / this.maxX ;

            this.init() ;

            // 渲染了图片之后才会有Li
            this.oLis = this.oUl.querySelectorAll('li') ;

            this.event()
        }


        Mirror.prototype.init = function() {
            // 渲染图片
            this.oLeftImg.src = this.small[0] ;
            this.oRightImg.src = this.big[0] ;
            // 小图列表
            let html = '' ;
            this.small.forEach((v,i)=>{
                html += `
                <li data="${i}">
                    <img src="${v}" alt="">
                </li>`
            })
            this.oUl.innerHTML = html ;
        }


        Mirror.prototype.event = function() {
            // 鼠标移入移除
            this.oLeft1.onmouseover = () => {
                this.oCover.style.visibility = 'visible' ;
                this.oRightImg.style.visibility = 'visible' ;

                this.oLeft1.onmousemove = e => {
                    let x = e.pageX - this.leftVal - this.r - this.bd;
                    let y = e.pageY - this.topVal - this.r - this.bd ;
                    if(x < 0) x = 0 ; 
                    if(y < 0) y = 0 ;
                    if(x > this.maxX) x = this.maxX ;
                    // 是正方形
                    if(y > this.maxX) y = this.maxX ;
                    this.oCover.style.cssText += `left:${x}px;top:${y}px` ;
                    this.oRightImg.style.cssText += `left:${-x * this.scale}px;top:${-y * this.scale}px` ;
                }
            }
            this.oLeft1.onmouseout = () => {
                this.oCover.style.visibility = 'hidden' ;
                this.oRightImg.style.visibility = 'hidden' ;
            }


            // 小图移入移除换图
            this.oUl.onmouseover = e => {
                if(e.target.tagName === 'LI') {
                    const i = e.target.getAttribute('data') ;
                    this.oLeftImg.src = this.small[i] ;
                    this.oRightImg.src = this.big[i] ;
                }
            }

        }


        const m = new Mirror(smallArr , bigArr) ;





        function getCss(obj , prop) {
            if(window.getComputedStyle) {
                return parseInt(getComputedStyle(obj)[prop]) ;
            }
            return parseInt(obj.currentStyle[prop])
        }

    </script>
</body>
</html>